<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>-->
    <script src="./vue.js"></script>
</head>
<body>

<!-- 1, 浏览器第一次解析下面代码: 发现div, 创建divNode结点对象放到/挂载到DOM树上
           {{msg}}: 是个字符串(第一次解析是个字符串), 产生一个文本Node对象挂载到dom树上    -->
    <div id="root">
        <!-- 被Vue对象关联之后, Vue对象根据el属性关联, 在第二次解析的时候:  按照Vue+HTML重新解析  -->
        <div>
            <!--  {{ }}: 在Vue语法中, 是个叫'插值'表达式'的东西
                        按照Vue语法解析的时候, 这个插值表达式中用到的变量, 去对应的Vue对象中获取
               -->
            {{ 1 + 2}}
            {{ msg1 + msg2}}
        </div>


        <div id="app">
            {{msg1}}
        </div>
    </div>



    <script>
        /*  代码解析到这: new Vue 在创建对象, 创建Vue对象 (前提引入Vue语法)
            1, 如果Vue对象一旦创建, 会立即检测自己的内部的el属性
               el: "#root"  -> 等价要求我们在dom树上找到一个对应id为root的Node对象
               -> 找到这个对象之后, 把个对象重写解析生成 (把这个对象所对应的代码重新解析, 重新挂载, 按照Vue发解析 )
        */
        new Vue({
            el: "#root",
            data: { // 在Vue对象中, data是一个Vue对象专用用来自定义参数的位置
                msg1: "zs",
                msg2: "ls"
            }
        })

    </script>




</body>
</html>
